<template>
  <div>
    <van-field
      readonly
      clickable
      :value="value"
      :label="label"
      placeholder="请选择"
      input-align="right"
      right-icon="arrow"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['conditions', 'label'],
  data () {
    return {
      value: '',
      showPicker: false
    }
  },

  computed: {
    columns () {
      return this.conditions.map(item => item.label)
    }
  },
  created () {

  },

  methods: {

    onConfirm (value) {
      this.value = value
      this.showPicker = false
      this.$emit('setValue', value)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
